<template>
	<div class="newbookup">
		<Homeheader />
		<el-input type="text" placeholder="请输入书本编号" v-model="select_id" style="width: 200px;margin-left: 50px;" />
		<el-input type="text" placeholder="请输入图书名称" v-model="select_name" style="width: 200px;margin-left: 50px;" />
		<el-input type="text" placeholder="请输入图书类型" v-model="select_type" style="width: 200px;margin-left: 50px;" />
		<el-button type="primary" @click="sel()" style="margin-left: 60px;">搜索</el-button>
		<!--分页工具条-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage4" :page-sizes="[5,10]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
		</el-pagination>
		<el-table style="width: 100%" :data="bookList" :row-class-name="tableRowClassName" @row-click="onRowClick"
			@selection-change="handleSelectionChange">
			<el-table-column label="图片" width="">
				<template v-slot="scope"> 
				  <el-image style="width: 100px; height: 100px" :src="require('@/assets/img/'+scope.row.book_pic+'.jpg')"/>
				</template>
			</el-table-column>
			<el-table-column prop="bid" label="书本编号" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_name" label="书本名称" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_type" label="书本类型" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_intro" label="书本简介" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_number" label="书本库存" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_sale" label="销售量" width="" align="center" header-align="center">
			</el-table-column>
			<!--<el-table-column prop="book_balance" label="当前价格" width="">
			</el-table-column>-->
			<el-table-column prop="book_membalance" label="当前价格" width="" align="center" header-align="center">
			</el-table-column>
		</el-table>
		
		
	</div>
</template>

<script>
	import Homeheader from "@/components/Homeheader";
	import axios from 'axios'
	export default {
		data() {
			return {
				select_name:'',
				select_id:'',
				select_type:'',
				selectbook:{
					bid:'',
					book_name:'',
					book_type:''
				},
				bookList: [],
				book_name: '',
				book_type: '',
				book_intro: '',
				book_number: '',
				book_balance: '',
				bid: '',
				currentRowIndex: '',
				dataonLineListSelections: [],
				// 每页显示的条数
				pageSize: 5,
				// 总记录数
				totalCount: 100,
				// 当前页码
				currentPage: 1,
				book: {
					bid: '',
					book_name: '',
					book_type: '',
					book_intro: "",
					book_number: "",
					book_balance: ""
				},
			}
		},
		created() {
			this.findByPages();
			this.$nextTick(() => { //重新渲染分页
				this.pageshow = true;
			});
		},
		methods: {
			sel: function() {
			  this.selectbook.bid = this.select_id;
			  this.selectbook.book_name = this.select_name;
			  this.selectbook.book_type = this.select_type;
			  this.findByPages()
			},
			findByPages() {
				axios({
					method: "post",
					url: "http://localhost:8080/book/selectbypc?currentPage=" + this
						.currentPage + "&pageSize=" + this.pageSize,
					data: this.selectbook
				}).then(res => {
					//设置表格数据
					this.bookList = res.data.rows; // {rows:[],totalCount:100}
					//设置总记录数
					this.totalCount = res.data.totalCount;
				})
			},
			//分页
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				// 重新设置每页显示的条数
				this.pageSize = val;
				this.findByPages();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				// 重新设置当前页码
				this.currentPage = val;
				this.findByPages();
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.row_index = rowIndex;
			},
			onRowClick(row, event, column) {
				this.currentRowIndex = row.row_index;
				this.addbookcar(this.currentRowIndex);bookList
				alert(this.bookList[index].bid);
			},
			addbookcar(index) {
				axios.post('http://localhost:8080/bookcar/addBookCar', 'bid=' + this.bookList[index].bid + '&book_name=' +
						this.bookList[index].book_name +'&book_balance=' + this.bookList[index].book_balance)
					.then(res => {
						alert(res.data)
					})
			}
		}
	}
</script>

<style scoped>
	.newbookup {
		width: 955px;
		margin-top: 10px;
		background-color: whitesmoke;
	}

	.newbookup .newbookupbody div:nth-of-type(1) p {
		width: 550px;
		line-height: 50px;
		margin-top: 10px;
		float: left;
		margin-left: 20px;
	}

	.newbookup .newbookupbody div:nth-of-type(1) a img {
		width: 120px;
		float: left;
		margin-left: 100px;
	}

	.newbookup .newbookupbody div:nth-of-type(2) p {
		width: 600px;
		margin-top: 50px;

	}

	.newbookup .newbookupbody div:nth-of-type(2) img {
		width: 170px;
		float: left;
		margin-left: 70px;
	}

	.newbookup .newbookupbody div:nth-of-type(3) p {
		width: 600px;
		margin-top: 50px;

	}

	.newbookup .newbookupbody div:nth-of-type(3) img {
		width: 170px;
		float: left;
		margin-left: 70px;
	}
</style>
